<script setup>
import CommonModal from "../modal/CommonModal.vue";
import { ref } from "vue";
import { salesComment } from "@/api/user";
import { ElMessage } from "element-plus";

const props = defineProps({
  orderDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  goodsDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});
const commentModalShow = ref(false);
const requireClarityScore = ref(5);
const responseScore = ref(5);
const cooperateScore = ref(5);
const comment = ref("");
const commonSubmit = async () => {
  const params = {
    orderId: props.orderDetails.id,
    requireClarityScore: requireClarityScore.value,
    responseScore: responseScore.value,
    cooperateScore: cooperateScore.value,
    comment: comment.value,
  };
  try {
    const res = await salesComment(params);
    if (res.code === 200) {
      commentModalShow.value = false;
      ElMessage.success("评价成功");
      emits("update:orderDetails");
    }
  } catch (error) {
    console.log(error);
  }
};
</script>

<template>
  <div class="status">
    <img class="icon" src="@/assets/order-status-icon.png" alt="" />
    <div class="info">
      <h3 class="title">请对 {{ orderDetails?.nickName }} 的本次合作做出评价</h3>
      <p class="confirm-list">本次服务开始于 {{ orderDetails.startTime }}</p>
      <p class="btn"><button @click="commentModalShow = true">评价</button></p>
    </div>
  </div>
  <CommonModal
    title="综合评价"
    confirm-text="发布"
    v-if="commentModalShow"
    @close="commentModalShow = false"
    @confirm="commonSubmit"
  >
    <template #content>
      <p class="common-rate-line">
        <span>需求清晰</span>
        <el-rate
          allow-half
          v-model="requireClarityScore"
          :colors="['#1DBF73', '#1DBF73', '#1DBF73']"
          show-score
          score-template="{value}"
        />
      </p>
      <p class="common-rate-line">
        <span>响应及时</span>
        <el-rate
          allow-half
          v-model="responseScore"
          :colors="['#1DBF73', '#1DBF73', '#1DBF73']"
          show-score
          score-template="{value}"
        />
      </p>
      <p class="common-rate-line">
        <span>协作顺畅</span>
        <el-rate
          allow-half
          v-model="cooperateScore"
          :colors="['#1DBF73', '#1DBF73', '#1DBF73']"
          show-score
          score-template="{value}"
        />
      </p>
      <p class="comment-textarea">
        <el-input
          v-model="comment"
          type="textarea"
          :maxlength="1000"
          show-word-limit
          placeholder="留下你的评价吧…"
          style="width: 100%"
        ></el-input>
      </p>
    </template>
  </CommonModal>
</template>

<style scoped lang="scss">
.status {
  display: flex;
}
.icon {
  flex: 0 0 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
.info {
  flex: 1;
  .title {
    font-size: 20px;
    color: #191e28;
    margin-bottom: 12px;
  }
  .confirm-list {
    color: rgba(25, 30, 40, 0.48);
    line-height: 24px;
    span {
      color: #1dbf73;
    }
  }
  .btn {
    margin-top: 16px;
    button {
      width: 180px;
      height: 48px;
      background: #1dbf73;
      border-radius: 8px 8px 8px 8px;
      border: none;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      &:nth-child(2) {
        background: #ffffff;
        color: rgba(25, 30, 40, 0.6);
        border: 1px solid rgba(25, 30, 40, 0.08);
        margin-left: 16px;
      }
    }
  }
  .btn {
    margin-top: 16px;
    button {
      width: 180px;
      height: 48px;
      background: #1dbf73;
      border-radius: 8px 8px 8px 8px;
      border: none;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      &:nth-child(2) {
        background: #ffffff;
        color: rgba(25, 30, 40, 0.6);
        border: 1px solid rgba(25, 30, 40, 0.08);
        margin-left: 16px;
      }
    }
  }
}
.common-rate-line {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  &:nth-child(1) {
    margin-top: 20px;
  }
  span {
    color: #191e28;
    font-weight: bold;
    margin-right: 16px;
  }
}
</style>

<style>
.comment-textarea .el-textarea__inner {
  height: 96px;
  width: 352px;
  background: rgba(25, 30, 40, 0.02);
  border-radius: 12px 12px 12px 12px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 12px;
  box-sizing: border-box;
}
</style>
